<template>
  <!-- 按钮  -->
  <button
    class="lm-button"
    @click="handelClick"
    :disabled="disabled"
    :size="size"
    :class="btnClass"
    :style="btnStyle"
  >
    <div class="lm-button-center">
      <i v-if="icon" :class="icon"></i>
      <!-- 如果没有传入插槽就不展示span -->
      <span v-if="$slots.default">
        <slot></slot>
      </span>
    </div>
  </button>
</template>
<script>
import { oneOf } from "../../utils/index";
const basisCls = "lm-button-size-";
export default {
  name: "LmButton",
  props: {
    type: {
      validator(value) {
        return oneOf(value, [
          "default",
          "primary",
          "info",
          "success",
          "warning",
          "danger",
        ]);
      },
      default: "default",
    },
    plain: {
      type: Boolean,
      default: false,
    },
    round: {
      type: Boolean,
      default: false,
    },
    circle: {
      type: Boolean,
      default: false,
    },
    icon: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    size: {
      validator(value) {
        return oneOf(value, ["long", "large", "default", "small"]);
      },
      default: "default",
    },
    color: {
      type: String,
      default: "",
    },
    background: {
      type: String,
      default: "",
    },
  },
  computed: {
    btnClass() {
      const { type, plain, round, circle, disabled, size } = this;
      return {
        [`lm-button-${type}`]: type,
        [`${basisCls}${size}`]: size,
        ["is-plain"]: plain,
        ["is-round"]: round,
        ["is-circle"]: circle,
        ["is-disabled"]: disabled,
      };
    },
    btnStyle() {
      return {
        backgroundColor: this.background,
        color: this.color,
      };
    },
  },
  methods: {
    // 向外暴露的方法
    handelClick(e) {
      this.$emit("click", e);
    },
  },
};
</script>
<style lang="scss"  scoped>
@import "./style.scss";
</style>